import { useState, useEffect } from 'react';
//引入编程式导航
import {useNavigate} from "react-router-dom";
import "../assent/css/home.css";
//引入vant组件
import { Search, Toast, Grid, Tag } from 'react-vant';
//引入vant图标
import { LocationO, ShareO, Gift, HotSale, YouzanShield, ShopCollect, Card } from '@react-vant/icons';

//引入axios方法 获取新人专享,万人团，倒计时,秒杀
import { getnew, getgroupon, getcountdown, getseckill, getindexgoods } from "../request/app.js";


//函数
function Home() {
    // 编程式导航
    let nav = useNavigate();
    // 一重礼的数组
    let [giftList, addGiftList] = useState([]);
    // 万人团的数组
    let [couponList, addCoupList] = useState([]);
    // 限时秒杀的数组
    let [spikeList, addSpikeList] = useState([]);
    //选项卡选择数组
    let tabList = [ {
        id: 1,
        goodsname: '第一个'
    }, {
        id: 2,
        goodsname: '第二个'
    }, {
        id: 3,
        goodsname: '第三个'
    }, {
        id: 4,
        goodsname: '第四个'
    }];
    // 所有商品的数组
    let [allList,addAll] = useState([]);
    //切换选项卡的act
    let [act, changeAct] = useState(0)
    //挂载利用Hooks 就是挂载完成的事情 给每个数组添加初始值
    useEffect(() => {
        //新人专享
        getnew().then(res => {
            if (res.code != 200) {
                Toast.fail(`新人专享` + res.msg);
                return;
            };
            // console.log(res);
            // 利用Hooks的useState  一重礼的数组修改
            addGiftList(res.list);
        })
        //万人团
        getgroupon().then(res => {
            if (res.code != 200) {
                Toast.fail(`万人团` + res.msg);
                return;
            };
            // console.log(res);
            // 万人团的数组改变
            addCoupList(res.list);
        });

        //倒计时
        getcountdown().then(res => {
            if (res.code != 200) {
                Toast.fail(`倒计时` + res.msg);
                return;
            };
            // console.log(res, "倒计时");
        });

        //秒杀
        getseckill().then(res => {
            if (res.code != 200) {
                Toast.fail(`限时秒杀` + res.msg);
                return;
            };
            // console.log(res.list, "秒杀");
            // 限时秒杀的数组改变
            addSpikeList(res.list);
        })

        //商品信息
        getindexgoods().then(res => {
            if (res.code != 200) {
                Toast.fail(`商品信息` + res.msg);
                return;
            };
            // console.log(res.list);
            //获取首页全部商品的数据
            addAll(res.list[0].content);
        })
    }, []);

    //方法
    function changeList(index) {
        getindexgoods().then(res => {
            addAll(res.list[index].content)
        })
        // 修改选中的active
        changeAct(index);
    }
    return <div id='wrap'>
        {/* 头部 */}
        <header >
            <div className='type_area top'>
                <h2>小U优选</h2>
                <Search
                    value={''}
                    placeholder="请输入搜索内容"
                    onSearch={(val) => {
                    }}
                />
                <span><LocationO /></span>
            </div>

        </header>

        {/* 新人专享 */}
        <div className='getnew'>
            <div className='type_area'>
                {/* 标题 */}
                <div className='title clearfix'>
                    <h1>新人专享</h1>
                    <div className='time'>
                        <span>05</span> : <span>25</span> : <span>40</span>
                    </div>
                    <p>查看全部 &gt;</p>
                </div>

                {/* 一重礼 */}
                <div className='one'>
                    {/* 具体内容 */}
                    <div className='gift'>
                        <div className='onegift'>
                            <h2>新人专享</h2>
                            <p>新人特价专区 <span>（限量供应，先到先得）</span> </p>
                        </div>

                        <ul className='clearfix'>
                            {
                                giftList.map(item => {
                                    return <li key={item.id} onClick={
                                        ()=>{
                                            nav('/detail',{state:{id:item.id,type:1}})
                                        }
                                    }>
                                        <img src={item.img} />
                                        <h3>{item.goodsname}</h3>
                                        <p>￥{item.price} <s>￥{item.market_price}</s> <span><ShareO /></span></p>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                </div>

                {/* 万人团 */}
                <div className='two'>
                    {/* 内容 */}
                    <div className='gift'>
                        <div className='onegift'>
                            <h2>万人团</h2>
                            <p>新人通用50元礼券 <span>（下单立减，省了又省）</span> </p>
                        </div>

                        <ul className='clearfix'>
                            {
                                couponList.map(item => {
                                    return <li key={item.id} onClick={
                                        ()=>{
                                            nav('/detail',{state:{id:item.id,type:2}})
                                        }
                                    }>
                                        <img src={item.img} />
                                        <h3>{item.goodsname}</h3>
                                        <p>￥{item.price} <s>￥{item.market_price}</s> <span><ShareO /></span></p>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        {/* 下面所有的商品 */}
        <div id='allbox'>

            {/* 那一排icon */}
            <div className='icon'>
                <Grid columnNum={5}>
                    <Grid.Item icon={<Gift />} color="#ff6040" text="限时秒杀" />
                    <Grid.Item icon={<HotSale />} text="畅销商品" />
                    <Grid.Item icon={<YouzanShield />} text="品质大牌" />
                    <Grid.Item icon={<ShopCollect />} text="小U自营" />
                    <Grid.Item icon={<Card />} text="积分商城" />
                </Grid>
            </div>

            {/* 秒杀 */}
            <div className='type_area'>
                {/* 超级秒杀 */}
                <div className='seckill'>
                    <div className='title'>
                        <h2>超级秒杀</h2>
                        <p> <span>05</span>  :  <span>42</span>  :  <span>47</span>  </p>
                    </div>
                    <div className='content'>
                        <img src="https://img2.baidu.com/it/u=478354857,3251920461&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="" />
                        <div className='rightbox'>
                            <h2>溪木原山茶花洁面乳精选太行山最优质...</h2>
                            <div>
                                <p className='money'>￥<span>29.99</span> <s>69.9</s>
                                </p>
                                <p className='gobuy'>马上抢</p>
                            </div>
                        </div>
                    </div>
                </div>

                {/* 限时秒杀 */}
                <div className='spike'>
                    {/* 具体内容 */}
                    <div className='gift'>
                        <div className='onegift'>
                            <h2>限时秒杀</h2>
                            <p>新人特价专区 <span>（限量供应，先到先得）</span> </p>
                        </div>

                        <ul className='clearfix'>
                            {
                                spikeList.map(item => {
                                    return <li key={item.id} onClick={
                                        ()=>{
                                            nav('/detail',{state:{id:item.id,type:1}})
                                        }
                                    }>
                                        <img src={item.img} />
                                        <h3>{item.goodsname}</h3>
                                        <p>￥{item.price} <s>￥{item.market_price}</s> <span><ShareO /></span></p>
                                    </li>
                                })
                            }
                        </ul>
                    </div>

                </div>

                {/* 下面商品以及选项卡 */}
                <ul className='tab'>
                    {
                        tabList.map((item, index) => {
                            return <li key={item.id} className={index == act ? 'active' : ''} onClick={changeList.bind(this, index)}>
                                {item.goodsname}
                            </li>
                        })
                    }
                </ul>

                {/* 选项卡的商品数据 */}
                <ul className='items'>
                    {/* <li>
                    <img src="https://img0.baidu.com/it/u=2471949583,3673126699&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=640" alt="" />
                    <div className='rightcon'>
                        <Tag type="success" size="large">7.9折</Tag>
                        <h2>商品名称商品名称商品名称商品名称商品名称商品名称商品名称</h2>
                       <div>
                            <p>￥ <span>1.9</span> <s>￥199</s></p>
                            <button>加入购物车</button>
                       </div>
                       <h4>最近多少人看过</h4>
                    </div>
                </li> */}
                    {
                        allList.map(item => { 
                            return <li key={item.id} onClick={
                                ()=>{
                                    nav('/detail',{state:{id:item.id,type:1}})
                                }
                            }>
                                <img src={item.img} />
                                <div className='rightcon'>
                                    <Tag type="success" size="large">7.9折</Tag>
                                    <h2>{item.goodsname}</h2>
                                    <div>
                                        <p>￥ <span>{item.price}</span> <s>￥{item.market_price}</s></p>
                                        <button>查看宝贝</button>
                                    </div>
                                    <h4>{item.description}</h4>
                                </div>
                            </li>
                        })
                    }
                </ul>
            </div>

        </div>
        {/* 为了撑起来最下面 */}
        <div id='foot'></div>
    </div>
}

export default Home